﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>好友列表</title>

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600" rel="stylesheet">
<link rel="stylesheet" href="/css/reset.min.css">
<link rel="stylesheet" href="/css/style.css">

</head>
<body>


<div class="wrapper">

	<div class="container">
        <div class="left">
            <div class="top">
                <div >
                    <button type="button" onclick="window.location.href='/msg/friends'" class="search">好友列表</button>
                    <button type="button" onclick="window.location.href='/msg/chatting'" class="search">聊天列表</button>
                </div>
            </div>
            <ul  class="people">
                <li  th:each="user : ${users}" class="person" th:attr="data-chat='person'+${user.id}">
                    <img th:src="${user.avatar}" alt="" />
                    <span class="name" th:text="${user.nickname}">...</span>
                    <span class="time" th:text="${user.gender==1?'男':'女'}">..</span>
                    <span class="preview" th:text="${user.mobile}"></span>
                </li>

            </ul>
        </div>
        <div class="right">
            <div class="top">
                <span>To: <span class="name" th:text="${fNickName}"></span></span></div>
            <div th:each="user : ${users}" class="chat" th:attr="data-chat='person'+${user.id}">
                <img  style="height: 100px;width:100px;left: 30%; top: 30%;display: inline;margin: 0 auto; position: absolute; " th:src="${user.avatar}"/>
                <button type="button" th:onclick="'javascript:toChat('+${user.id}+');'"  style="height: 50px;width:100px;text-align: center;display: inline;margin: 0 auto; position: absolute; left: 30%;; top: 50%;  ">聊天</button>
            </div>
            </div>
    </div>
</div>

<script  th:inline="javascript">
    function toChat(f) {
        self.location="/msg/toChatDetail/"+f;
    }

</script>
<script  th:inline="javascript">

    document.querySelector('.chat[data-chat=person'+[[${fId}]]+']').classList.add('active-chat');
    document.querySelector('.person[data-chat=person'+[[${fId}]]+']').classList.add('active');

    var friends = {
            list: document.querySelector('ul.people'),
            all: document.querySelectorAll('.left .person'),
            name: '' },

        chat = {
            container: document.querySelector('.container .right'),
            current: null,
            person: null,
            name: document.querySelector('.container .right .top .name') };


    friends.all.forEach(function (f) {
        f.addEventListener('mousedown', function () {
            f.classList.contains('active') || setAciveChat(f);
        });
    });

    function setAciveChat(f) {
        friends.list.querySelector('.active').classList.remove('active');
        f.classList.add('active');
        chat.current = chat.container.querySelector('.active-chat');
        chat.person = f.getAttribute('data-chat');
        chat.current.classList.remove('active-chat');
        chat.container.querySelector('[data-chat="' + chat.person + '"]').classList.add('active-chat');
        friends.name = f.querySelector('.name').innerText;
        chat.name.innerHTML = friends.name;
    }
</script>

</body>
</html>